<template>
	<view class="collect-box">
		<view class="collect-center mt44">
			<view class="tab-header f30 flex justify-between align-center">
				<view class="" @click="backMe">
					<i class="cuIcon-back f36"></i>
				</view>
				<view class="flex f30">
					<text class="flex flex-direction align-center" @click="addBor(1)"
						:class="bor == 1 ? 'style' : ''">关注</text>
				</view>
				<view class="flex f30">
					<text class="flex flex-direction align-center a" @click="addBor(2)"
						:class="bor == 2 ? 'style' : ''">粉丝</text>
				</view>

				<view class="">

				</view>
			</view>

			<view class="tab-list">
				<block v-if="bor == 1" v-for="(item, index) in followList" :key="index">
					<view class="flex justify-between align-center pt34">
						<image :src="item.headImg" class="mr29 w90 h90 r45" mode=""></image>
						<view class="flex justify-between align-center ww80 u-border-bottom pb34">
							<view class=" f30" style="color: #000000;">
								<view class="">
									<text style="font-weight: 600;">{{item.nickName}}</text>
									<i class="cuIcon-male ml26 f26" style="color:#40C6A8 ;" v-if="item.sex == 1"></i>
									<i class="cuIcon-male ml26 f26" style="color:#f00 ;" v-else></i>
									<text class="f22 ml8" style="color:#666 ;" >25</text>
								</view>
								<view class="mt26 flex align-center">
									<view class="pad-text mr14">
										男爵
									</view>
									<!-- 会员等级 -1普通用户 0 普通会员 1普通VIP 2 高级VIP 3 钻石VIP 4至尊VIP -->
									<image v-if="item.menberLabel == -1" src="../../static/vip/huiyuan.png" class="w110 h30 ml36" mode=""></image>
									<image v-if="item.menberLabel == 0" src="../../static/vip/huiyuan.png" class="w110 h30 ml36" mode=""></image>
									<image v-if="item.menberLabel == 1" src="../../static/vip/putong.png" class="w110 h30 ml36" mode=""></image>
									<image v-if="item.menberLabel == 2" src="../../static/vip/gaoji.png" class="w110 h30 ml36" mode=""></image>
									<image v-if="item.menberLabel == 3" src="../../static/vip/zs.png" class="w110 h30 ml36" mode=""></image>
									<image v-if="item.menberLabel == 4" src="../../static/vip/zhizun.png" class="w110 h30 ml36" mode=""></image>
								</view>
							</view>
							<view class="bgc-y" style="background-color: #F5F5F5;">
								<!-- <text>已关注</text> -->
								<text>相互关注</text>
							</view>
							<!-- <view class="bgc-y" style="border: 1rpx solid #333333;">
								<text>关注</text>
								
							</view> -->
						</view>
					</view>
					
				</block>
				
				
				<block v-if="bor == 2" v-for="(item, index) in fentList" :key="index">
					<view class="flex justify-between align-center pt34">
						<image :src="item.headImg" class="mr29 w90 h90 r45" mode=""></image>
						<view class="flex justify-between align-center ww80 u-border-bottom pb34">
							<view class=" f30" style="color: #000000;">
								<view class="">
									<text style="font-weight: 600;">{{item.nickName}}</text>
									<i class="cuIcon-male ml26 f26" style="color:#40C6A8 ;" v-if="item.sex == 1"></i>
									<i class="cuIcon-male ml26 f26" style="color:#f00 ;" v-else></i>
									<text class="f22 ml8" style="color:#666;">25</text>
								</view>
								<view class="mt26 flex align-center">
									<view class="pad-text mr14">
										男爵
									</view>
									
									<!-- 会员等级 -1普通用户 0 普通会员 1普通VIP 2 高级VIP 3 钻石VIP 4至尊VIP -->
									<image v-if="item.menberLabel == -1" src="../../static/vip/huiyuan.png" class="w110 h30 ml36" mode=""></image>
									<image v-if="item.menberLabel == 0" src="../../static/vip/huiyuan.png" class="w110 h30 ml36" mode=""></image>
									<image v-if="item.menberLabel == 1" src="../../static/vip/putong.png" class="w110 h30 ml36" mode=""></image>
									<image v-if="item.menberLabel == 2" src="../../static/vip/gaoji.png" class="w110 h30 ml36" mode=""></image>
									<image v-if="item.menberLabel == 3" src="../../static/vip/zs.png" class="w110 h30 ml36" mode=""></image>
									<image v-if="item.menberLabel == 4" src="../../static/vip/zhizun.png" class="w110 h30 ml36" mode=""></image>
								</view>
							</view>
							<view class="bgc-y" style="background-color: #F5F5F5;">
								<text>已关注</text>
							</view>
							<!-- <view class="bgc-y" style="border: 1rpx solid #333333;">
								<text>关注</text>
								
							</view> -->
						</view>
					</view>
				</block>
			</view>


		</view>
		
		
		<u-modal v-model="showModel" :show-cancel-button="true" :content="content"></u-modal>
		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bor: 1,
				content: '确定不再关注吗？',
				showModel: false,
				fentList: [],
				followList: [],
			};
		},
		onShow() {},
		onLoad(e) {
			this.bor = e.bor
			this.getMrFens()
			this.getMeFollow()
		},
		methods: {

			addBor(index) {
				console.log('index==>', index);
				this.bor = index
			},
			
			backMe() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			// 粉丝
			async getMrFens() {
				const res = await this.$u.get('api/follow/meFens')
				this.fentList = res.data
			},
			
			// 关注
			async getMeFollow() {
				const res = await this.$u.get('api/follow/meFollow')
				this.followList = res.data
			}
		}
	};
</script>

<style lang="scss" scoped>
	.collect-box {

		.collect-center {
			padding: 0 30rpx;

			.tab-header {
				color: #000000;
				font-size: 30rpx;
				height: 124rpx;
			}


			.style {
				font-size: 36rpx;
				font-weight: 600;
			}

			.style::after {
				content: '';
				width: 28rpx;
				height: 6rpx;
				background: #000000;
				border-radius: 3rpx;
				margin-top: 5rpx;
			}

			.tab-list {

				.pad-text {
					color: #40C6A8;
					font-size: 20rpx;
					padding: 5rpx 12rpx;
					border-radius: 30rpx;
					border: 1rpx solid #40C6A8;
				}

				.bgc-y {
					color: #666666;
					font-size: 24rpx;
					border-radius: 30rpx;
					padding: 13rpx 30rpx;
					
				}
			}
		}
	}
</style>
